<!-- 登录时记住账号密码 -->
<template>
    <div>
        <div class="item" v-model="accounts" v-for="item in accounts" v-bind:key="item" >
            <div class="account" @click="sendAccount(item)" >{{getAccount(item)}}</div>
            <div class="icon-defined" @click="deleteAccount(item)">
                <i class="el-icon-circle-close"></i>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'RememberAccount',
        data(){
            return {
                accounts: [],

                dataForFather:{
                    account:'',
                    password:'',
                }
            }
        },

        methods:{
            getAccount(item){
                return item.split("/")[0];
            },

            //给父组件传递account and password
            sendAccount(item){
                this.dataForFather.account = item.split("/")[0];
                this.dataForFather.password = item.split("/")[1];
                //func: 是父组件指定的传数据绑定的函数，this.msg:子组件给父组件传递的数据
                this.$emit('func',this.dataForFather)
            },

            deleteAccount(account){
                this.deleteAutoCompleteData('loginAccounts', account);
                this.accounts = this.getAutoCompleteData('loginAccounts');
            },
        },

        created(){
            this.accounts = this.getAutoCompleteData('loginAccounts');
        },

        mounted () {

        }
    }
</script>

<style lang="scss" scoped>
    .item{
        display: inline-block;
        height:30px;
        line-height:30px;
        width: 100%;
        background: #fff;
        border-radius: 5px;

        .account{
            display: inline-block;
            width: 260px;
            margin-left: 10px;
        }

        .icon-defined{
            display: inline-block;
            height: 30px;
            line-height: 30px;
            margin: 0;
            padding: 0;
            position: absolute;
            right: 5px;
            color: #c71616;
            font-size: 16px;
        }


        @media screen and (max-width: 480px) {
            .account{
                display: inline-block;
                width: 230px;
                margin-left: 10px;
            }
        }
    }   
</style>